<script setup name="formFileReport">
	import {
		reactive,
	} from 'vue';

	import api from '@/api/api';
	import util from '@/utils/util';
	import router from '@/router';

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();

	// 
	const list = reactive([{
		name: '实验室数量',
		icon: 'u199.svg',
		num: [295383],
	}, {
		name: '实验大纲数量',
		icon: 'u209.svg',
		num: [295383],
	}, {
		name: '实验项目数量',
		icon: 'u204.svg',
		num: [295383],
	}, {
		name: '实验课程数量',
		icon: 'u214.svg',
		num: [295383],
	}])


	// 跳转
	function go(index) {
		const title = index == 3 ? '中心学期实验资源使用情况' : '中心学期实验资源数量';
		const type = index == 3 ? 'table2' : 'table';
		router.push({
			path: '/sublevel',
			query: {
				title,
				type,
			}
		})
	}

	// 回调
	const emit = defineEmits(["change", ""]);
</script>

<template>
	<div class="statistics-list" style="height: 100%;">
		<div class="statistics-list-li" v-for="(item,index) in list" :key="index" @click="go(index)">
			<img class="img" :src="util.getImageUrl(item.icon)" />
			<div class="info">
				{{item.name}}
				<div class="num">{{item.num[0]}}</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.statistics-list {
		display: grid;
		gap: 10px 20px;
		grid-template-columns: repeat(2, 1fr);

		&-li {
			display: flex;
			gap: 20px;
			align-items: center;
			align-content: center;
			// justify-content: center;

			height: 140px;
			padding: 0 30px;
			height: 140px;
			-ms-overflow-x: hidden;
			overflow-x: hidden;
			-ms-overflow-y: hidden;
			overflow-y: hidden;
			background-image: url(../../../assets/img/u196_state0.svg);
			background-position: left top;
			background-repeat: no-repeat;
			background-attachment: scroll;
			background-size: cover;
			background-origin: border-box;
			border-radius: 0px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			color: white;
			font-style: normal;
			font-size: 18px;

			.img {
				width: 50px;
				height: 48px;
			}

			.num {
				margin-top: -10px;
				font-family: "DINPro", sans-serif;
				font-weight: 400;
				font-style: normal;
				font-size: 36px;
				color: #FFFFFF;
			}

			&:nth-child(2) {
				background-image: url(../../../assets/img/u206_state0.svg);
			}

			&:nth-child(3) {
				background-image: url(../../../assets/img/u201_state0.svg);
			}

			&:nth-child(4) {
				background-image: url(../../../assets/img/u211_state0.svg);
			}
		}
	}
</style>